<template>
    <div>
        <Row style="width:500px;margin: 100px auto;">
            <Col/>
                <Card>
                    <p slot="title">注册
                        <router-link to="/" style="float:right;">已有账号？</router-link>
                    </p>
                    <Form :model="formItem" :label-width="80" :rules="ruleValidate" ref="formItem">
                        <FormItem label="姓名" prop="name">
                            <Input v-model="formItem.name"/>
                        </FormItem>
                        <FormItem label="手机号" prop="mobile">
                            <Input v-model="formItem.mobile" />
                        </FormItem>
                        <FormItem label="学历" prop="degree">
                            <Select v-model="formItem.degree">
                                <Option value="beijing">高中</Option>
                                <Option value="shanghai">本科</Option>
                                <Option value="shenzhen">博士</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="性别">
                            <RadioGroup v-model="formItem.gender">
                                <Radio label="男">男</Radio>
                                <Radio label="女">女</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="用户名" prop="loginName">
                            <Input v-model="formItem.loginName"/>
                        </FormItem>
                        <FormItem label="密码" prop="loginKey">
                            <Input type="password" v-model="formItem.loginKey"/>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" @click="handleSubmit('formItem')" :loading=resloading>注册</Button>
                            <Button style="margin-left: 8px" @click="handleReset('formItem')">重置</Button>
                        </FormItem>
                    </Form>
                </Card>
            <!-- </Col> -->
        </Row>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions,mapState } = createNamespacedHelpers("Login");
export default {
    data(){
        return{
            formItem:{
                gender:'男'
            },
             ruleValidate: {
                    name: [
                        { required: true,min:3,max:5, message: '请输入3-5位字符', trigger: 'blur' }
                    ],
                    mobile: [
                        { required: true,min:11,max:11, message: '请输入11位手机号', trigger: 'blur' },
                    ],
                    degree: [
                        { required: true, message: '请选择学历', trigger: 'change' }
                    ],
                    loginName: [
                        { required: true,min:3,max:5, message: '请输入3-5位用户名', trigger: 'blur' }
                    ],
                    loginKey: [
                        { required: true,min:6,max:10, message: '请输入6-10位密码', trigger: 'blur' }
                    ]
                }
        }
    },
    methods:{
        handleSubmit(name){
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.doreg(this.formItem).then(()=>{
                        this.$Message.success('注册成功!')
                        this.$router.push('/')
                    }).catch(()=>{
                        this.$Message.error("服务器繁忙，请稍后重试！");
                    })
                }
            })
        },
        handleReset(name){
            this.$refs[name].resetFields();
        },
        ...mapActions(['doreg'])
    },
    computed:{
        ...mapState(['resloading'])
    }
};
</script>

<style>
</style>
